<template>
  <div>
    <!-- <h5>自定义颜色</h5> -->
    <el-menu style="height:calc(100vh - 60px)" :default-active="$route.path" :default-openeds="openArray" background-color="#555" text-color="#fff" :router="true"
      :collapse="$store.getters.collapsed" @open="handleOpen" @close="handleClose">
      <el-menu-item id="home" index="/index">
        <i class="el-icon-s-home" />
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="0">
        <template slot="title">
          <i class="el-icon-message" />
          <span>基础信息管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/basic/menu">菜单信息管理</el-menu-item>
          <el-menu-item index="/basic/shop">经营户管理</el-menu-item>
          <el-menu-item index="/basic/stall">摊位管理</el-menu-item>
          <el-menu-item index="/basic/balance">秤在线时间</el-menu-item>
          <el-menu-item index="/basic/judge">秤标定管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-shopping-cart-2" />
          <span>商品管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="2-1">商品管理</el-menu-item>
          <el-menu-item index="2-2">以销代进</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-bank-card" />
          <span>交易信息</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/deal/index">交易信息</el-menu-item>
          <el-menu-item index="3-2">交易统计</el-menu-item>
          <el-menu-item index="3-3">经营统计</el-menu-item>
          <el-menu-item index="3-4">报表管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-coordinate" />
          <span>快检信息</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="4-1">快检信息</el-menu-item>
          <el-menu-item index="4-2">快检月报</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-search" />
          <span>统计查询</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="5-1">交易监控</el-menu-item>
          <el-menu-item index="5-2">平衡详情</el-menu-item>
          <el-menu-item index="5-3">日达标详情</el-menu-item>
          <el-menu-item index="5-4">日达标品种</el-menu-item>
          <el-menu-item index="5-5">月达标详情</el-menu-item>
          <el-menu-item index="5-6">日达标设置</el-menu-item>
          <el-menu-item index="5-7">月达标设置</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-monitor" />
          <span>系统管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="6-1">用户管理</el-menu-item>
          <el-menu-item index="6-2">角色管理</el-menu-item>
          <el-menu-item index="6-3">资源分配</el-menu-item>
          <el-menu-item index="6-4">角色分配</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-star-off" />
          <span>区块链信息管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/fabric/view">数据总览</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import sesto from '@/storage/sessionstorage.js'
export default {
  data() {
    return {
      openArray: []
    }
  },
  created() {
    this.openArray = sesto.getItem('openArray') || this.openArray
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(this.openArray)
      // this.openArray.push(...this.openArray);
      console.log(key)
      console.log(keyPath)
      sesto.setItem('openArray', this.openArray)
    },
    handleClose(key, keyPath) {
      console.log(this.openArray)
      // this.openArray.splice(key, 1);
      sesto.setItem('openArray', this.openArray)
      console.log(key, keyPath)
    }
  }
}
</script>

<style >
#home {
  font-size: 18px !important;
  padding-left: 20px !important;
}

.el-menu-item.is-active,
.el-menu-item:hover {
  color: #fff;
  background-color: #66a032 !important;
}
.el-submenu__title:hover {
  background-color: #66a032 !important;
}
i {
  color: #fff !important;
}
.el-submenu__title {
  font-weight: bold !important;
  font-size: 18px;
}
.el-menu-item {
  font-weight: bold !important;
  font-size: 16px !important;
  padding-left: 50px !important;
}
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px !important; /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px !important;
  background: #ffffff !important;
  cursor: pointer !important;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px !important;
  /* -webkit-box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5) !important; */
  background: rgba(63, 98, 131, 0.8) !important;
  cursor: pointer !important;
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /* -webkit-box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5) !important; */
  border-radius: 0 !important;
  background: rgba(240, 240, 240, 0.5) !important;
  cursor: pointer !important;
}
</style>
